<!DOCTYPE html>
<html>
<head>
    <title>Demo 5 - Semi-transparent Thumbnails</title>
    <link href="themes/5/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/5/js-image-slider.js" type="text/javascript"></script>
    <link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="div1"><h2>Demo 5 - Semi-transparent Thumbnails</h2>
        <p>Demos: <a href="demo1.html">1</a><a href="demo2.html">2</a><a href="demo3.html">3</a><a href="demo4.html">4</a>
        <a href="demo5.html" class="current">5</a><a href="demo6.html">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
    </div>

    <div id="sliderFrame">
        <div id="ribbon"></div>
        <div id="slider">
            <a href="http://www.menucool.com/">
                <img src="images/image-slider-1.jpg" alt="Welcome to Menucool.com" />
            </a>
            <img src="images/image-slider-2.jpg" alt="Customizable Transition Effects" />
            <img src="images/image-slider-3.jpg" alt="Easy to use" />
            <img src="images/image-slider-4.jpg" alt="Pure Javascript. No jQuery. No flash." />
            <img src="images/image-slider-5.jpg" alt="#htmlcaption" />
            <img src="images/image-slider-1.jpg" alt="Most light weight Image Slider" />
            <img src="images/image-slider-2.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/image-slider-3.jpg" alt="" />
        </div>
        <div id="htmlcaption" style="display: none;">
            <em>HTML</em> caption. Back to <a href="http://www.menucool.com/">Menucool</a>.
        </div>
                
        <!--thumbnails-->
        <div id="thumbs">
            <div class="thumb"><img src="images/thumb1.jpg" /></div>
            <div class="thumb"><img src="images/thumb2.jpg" /></div>
            <div class="thumb"><img src="images/thumb3.jpg" /></div>
            <div class="thumb"><img src="images/thumb4.jpg" /></div>
            <div class="thumb"><img src="images/thumb5.jpg" /></div>
            <div class="thumb"><img src="images/thumb1.jpg" /></div>
            <div class="thumb"><img src="images/thumb2.jpg" /></div>
            <div class="thumb"><img src="images/thumb3.jpg" /></div>
        </div>
    </div>

    <div class="div2">
        Let's add a semi-transparent effect to the thumbnails, and each thumbnail will get back to its full opacity when hovered over.
        This can be easily implemented via the two built-in CSS class: <b class="cn">thumb</b> and <b class="cn">thumb-on</b>:
        <div class="code">#thumbs .thumb img{ opacity:0.6;filter:alpha(opacity:60); }
#thumbs .thumb-on img{ opacity:1;filter:alpha(opacity:100);}</div>
        <p>And there you have it!</p>
        <ul>
            <li>If there are many thumbnails and the containing block does not have enough room to show them, you can make the slider work together with our jQuery Slider. See <a href="http://www.menucool.com/slider/jquery-slideshow">jQuery Slideshow</a>.</li>
            <li>This demo needs a valid license to enable the thumbnail functions, such as clicking on a thumbnail will switch the slider to the corresponding slide. It won't work on the production server (though it works locally) if not licensed.</li>
        </ul>
    </div>

</body>
</html>
